<template>
  <div class='recommend'>
    <el-container>
      <el-header class="head">
        <el-breadcrumb separator="/" class="bread_crumb">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>主页推荐</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <h2>主页推荐</h2>
        <div class="nav">
          <el-button class="add_rec" @click="showDialog(1)">新增推荐</el-button>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="标题">
              <el-input v-model="formInline.user" placeholder="请输入关键字搜索"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formInline.region" placeholder="全部">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="点击效果">
              <el-select v-model="formInline.region" placeholder="全部">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="data_table">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="date"
              label="日期"
              align="center">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              align="center">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址"
              align="center">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="180"
              align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click="showDialog(3)" type="text" size="small">查看</el-button>
                <el-button @click="showDialog(2)" type="text" size="small">编辑</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--
      弹框
-->
        <el-dialog
          :visible.sync="dialogVisible"
          width="50%"
          :before-close="handleClose">
          <span slot="title">{{diaType[showType-1]}}</span>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="标题">
              <el-input v-model="form.name" placeholder="请输入标题" :disabled="showType==3"></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-select v-model="form.region" placeholder="请选择类型" :disabled="showType==3">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="form.region" placeholder="显示" :disabled="showType==3">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="排序值">
              <el-input v-model="form.name" placeholder="请输入排序值（数值越大，位置越靠前" :disabled="showType==3"></el-input>
            </el-form-item>
            <el-form-item label="格式">
              <el-select v-model="form.region" placeholder="请选择格式" :disabled="showType==3">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="更多">
              <el-select v-model="form.region" placeholder="请选择更多链接页面" :disabled="showType==3">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="内容">
              <el-select v-model="value" filterable multiple placeholder="请选择" :disabled="showType==3">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
<!--
          选中状态
-->
          <div class="sel_item">

          </div>
          <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
        </el-dialog>
      </el-main>
      <el-footer>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
          </el-pagination>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: 'addadvert',
    data() {
      return {
        showType: 0, // 0为banner 1为新增推荐 2为编辑推荐 3为查看推荐
        diaType: ['新增推荐', '编辑推荐', '查看推荐'],
        dialogVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formInline: {
          user: '',
          region: ''
        },
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4
      };
    },
    methods: {
      showDialog(type) { // 显示新增广告 编辑 查看内容页面
        this.showType = type;
        this.dialogVisible = true;
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  };
</script>

<style lang="less" scoped>
  .fl{
    float: left;
  }
  .recommend{
    .head{
      margin-top: 20px;
      .bread_crumb{
        line-height:55px;
      }
    }
    .nav{
      height:55px;
      .add_rec{
        width: 140px;
        height: 40px;
        float: left;
      }
      .el-form{
        margin-left:3%;
        float: left;
      }
    }
    .data_table{
      width: 82%;
    }
    .el-dialog{
      .el-form{
        .el-select{
          width: 100%;
        }
        .banner_loc{
          width: 30%;
          height: 200px;
          border: 1px solid #ccc;
        }
      }
    }
  }
</style>
